<template>
  <view class="main">
    <v-tabs v-model="currentTab" :scroll="false" :tabs="tabs" lineHeight="4rpx"></v-tabs>
    <view class="wrapper">
      <!-- 代办事项 -->
      <todo v-if="currentTab === 0"></todo>
      <!-- 超时提醒 -->
      <remind v-if="currentTab === 1"></remind>
      <!-- 数据看板 -->
      <databoard v-if="currentTab === 2"></databoard>
      <!-- 疫情动态 -->
      <information v-if="currentTab === 3"></information>
    </view>
  </view>
</template>
<script>
import VTabs from '@/components/v-tabs/index.vue';
import Todo from './todo/todo.vue';
import Remind from './remind.vue';
import Information from './information.vue';
import Databoard from './data-board.vue';
import { mapState, mapMutations } from 'vuex';

export default {
  components: {
    VTabs,
    Todo,
    Remind,
    Databoard,
    Information
  },
  data() {
    return {
      interval: 3000,
      indicatorDots: false,
      currentTab: 0,
      tabs: ['待办事项', '超时提醒', '数据看板', '疫情动态']
    };
  },
  computed: {
    ...mapState(['forcedLogin', 'hasLogin', 'userName']),
    getSwiperLen() {
      if (!this.$refs.swiper) {
        return false;
      }
      return this.$refs.swiper.length;
    }
  },
  onLoad() {
    console.log('onLoad');
  },
  mounted() {
    if (this.$refs.swiper) {
      this.indicatorDots = this.$refs.swiper.$children.length > 1;
    }
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>
<style lang="scss">
.main {
  width: 100%;
  height: 100%;
  padding: 0 40rpx;
  .remind {
    padding: 0;
  }
  .swiper {
    height: 300rpx;
  }

  .wrapper {
    width: 100%;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 2.5;

      &-icon {
        width: 76rpx;
        height: 76rpx;
        font-size: 38rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;

        &.primary {
          background-color: $uni-color-primary;
        }

        &.success {
          background-color: $uni-color-success;
        }

        &.warning {
          background-color: $uni-color-warning;
        }

        &.error {
          background-color: $uni-color-error;
        }
      }

      text {
        font-size: 26rpx;
      }
    }
  }

  .swiper-item {
    // padding: 40rpx 30rpx 0 30rpx;
    height: 100%;
    background-color: rgba($color: $uni-color-primary, $alpha: 0.08);
    border-radius: 32rpx;

    .btn {
      margin-top: 40rpx;
    }
  }

  .content {
    line-height: 2;
    padding: 40rpx;
  }

  .title {
    // font-size: 36rpx;
    // font-weight: 500;
  }

  .sub-title {
    font-size: 24rpx;
    color: $uni-sub-text-color;
  }

  .m20 {
    display: block;
    margin: 40rpx 0;
  }

  .icon {
    border-radius: 14rpx;
    background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
    color: $uni-color-primary;
  }
}
remind,
databoard,
information,
todo {
  width: 100%;
}
</style>
